import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'

class News extends Component {
  state = {
    news: [
      { id: 1, title: 'aaaaa' },
      { id: 2, title: 'bbbb' },
      { id: 3, title: 'ccccc' }
    ]
  }

  // 编程式导航
  goDetail = id => () => {
    this.props.history.push({
      pathname: `/detail/${id}`,
      search: 'kw=abc' + id,
      state: {
        phone: '13134543123'
      }
    })
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.news.map((item, index) => (
            <li key={item.id} onClick={this.goDetail(item.id)}>
              {/* 声明式导航，2选1，不要共用 */}
              {/* <NavLink
                to={{
                  pathname: `/detail/${item.id}`,
                  search: 'kw=abc' + index,
                  // 隐式传值  -- 使用history => state对象
                  state: {
                    phone: '13134543123'
                  }
                }}
              >
                {item.title}
              </NavLink> */}
              {item.title}
            </li>
          ))}
        </ul>
      </div>
    )
  }
}

export default News
